<template>
  <div class="box_cb">
    <div class="box_cb1">
      <div class="top000">
        <div class="bd"></div>
      </div>
      <el-radio-group v-model="radio1" size="large">
        <el-radio-button label="内地票房top100" @click="getPageData(0)" :class="{ newStyle: 0 === number }" />
        <el-radio-button label="单周冠军票房历年" @click="getPageData2(1, 12)" :class="{ newStyle: 1 === number }" />
        <el-radio-button label="历年内地票房排行" @click="getPageData3(1, 12)" :class="{ newStyle: 2 === number }" />
      </el-radio-group>

      <div class="box_cb2">
        <div v-show="0 === number">
          <el-row>
            <el-col :span="8" v-for="(filmid, index) in pageInfo" :key="index" :offset="1.1">
              <el-card class="box-card00">
                <div class="card-left00">
                  <img :src="filmid.picture" class="picture" />
                </div>
                <div class="card-right00">
                  <div class="filmName">电影名称：{{ filmid.filmName }}</div>
                  <div class="type">类型：{{ filmid.type }}</div>
                  <div class="star">主演：{{ filmid.star }}</div>
                  <div class="director">导演：{{ filmid.director }}</div>
                  <div class="area">制片：{{ filmid.area }}</div>
                  <div class="box_office">
                    票房（亿）：{{ filmid.box_office }}
                  </div>
                  <div class="showYear">年份：{{ filmid.showYear }}</div>
                  <div class="score">评分：{{ filmid.score }}</div>
                  <!-- <div class="rank">排名：{{ filmid.rank }}</div>      -->
                </div>
                <!-- </div> -->
              </el-card>
            </el-col>
          </el-row>
        </div>

        <div v-show="1 === number">
          <el-row>
            <el-col :span="8" v-for="(filmid, index) in pageInfo" :key="index" :offset="1.1">
              <el-card class="box-card00">
                <div class="card-left00">
                  <img :src="filmid.picture" class="picture" @click="openw(filmid.link)" />
                </div>
                <div class="card-right00">
                  <div class="filmName" @click="openw(fid.link)">
                    电影名称：{{ filmid.filmName }}
                  </div>
                  <div class="type">类型：{{ filmid.type }}</div>
                  <div class="star">主演：{{ filmid.star }}</div>
                  <div class="director">导演：{{ filmid.director }}</div>
                  <div class="area">制片：{{ filmid.area }}</div>
                  <div class="showYear">年份：{{ filmid.showYear }}</div>
                  <div class="score">评分：{{ filmid.score }}</div>

                  <div class="id">编号：{{ filmid.id }}</div>
                  <div class="brief">介绍：{{ filmid.brief }}</div>
                </div>
                <!-- </div> -->
              </el-card>
            </el-col>
          </el-row>
        </div>

        <div v-show="2 === number">
          <el-row>
            <el-col :span="8" v-for="(filmid, index) in pageInfo" :key="index" :offset="1.1">
              <el-card class="box-card00">
                <div class="card-left00">
                  <img :src="filmid.picture" class="picture" @click="openw(filmid.link)" />
                </div>
                <div class="card-right00">
                  <div class="filmName">电影名称：{{ filmid.filmName }}</div>
                  <div class="type">类型：{{ filmid.type }}</div>
                  <div class="star">主演：{{ filmid.star }}</div>
                  <div class="director">导演：{{ filmid.director }}</div>
                  <div class="area">制片：{{ filmid.area }}</div>
                  <div class="showYear">年份：{{ filmid.showYear }}</div>
                  <div class="score">评分：{{ filmid.score }}</div>
                  <div class="id">编号：{{ filmid.id }}</div>
                  <div class="brief">介绍：{{ filmid.brief }}</div>
                </div>
                <!-- </div> -->
              </el-card>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="fenye">
        <div class="bdd"></div>
        <el-pagination :background="true" v-model:current-page="currentPage" v-model:page-size="pageSize"
          layout="prev, pager, next, jumper" @size-change="handleSizeChange" :total="37962"
          @current-change="handleCurrentChange" />
        <div class="bdd"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      number: 0,
      tableData: [],
      pageInfo: {},
      pageSize: 12,
      currentPage: 1,
    };
  },
  methods: {
    change: function (index) {
      this.number = index;
    },

    openw(e) {
      // window.location.href = e, '_blank'
      window.open(e, "_blank");
    },

    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.getPageData(this.currentPage, this.pageSize);
      console.log("size", pageSize);
    },
    handleCurrentChange(pageNum) {
      this.currentPage = pageNum;
      this.getPageData(this.currentPage, this.pageSize);
      console.log("num", pageNum);
    },

    getPageData(num, size) {
      //得到分页数据
      this.$http
        .get("top100/v1/film", { params: { pageNum: num, pageSize: size } })
        .then((response) => {
          this.pageInfo = response.data;
          this.tableData = this.pageInfo.list;
          console.log(response.data);
        });
    },
    getPageData2(num, size) {
      //得到分页数据
      this.$http
        .get("inland/v1/weekChamp", {
          params: { pageNum: num, pageSize: size },
        })
        .then((response) => {
          this.pageInfo = response.data;
          this.tableData = this.pageInfo.list;
          console.log(response.data);
        });
    },

    getPageData3(num, size) {
      //得到分页数据
      this.$http
        .get("eachYear/v1/yearSell", {
          params: { pageNum: num, pageSize: size },
        })
        .then((response) => {
          this.pageInfo = response.data;
          this.tableData = this.pageInfo.list;
          console.log(response.data);
        });
    },
  },

  mounted() {
    this.getPageData(1, 12);
  },
};

</script>

<style lang="scss" scoped>
.box_cb {
  width: 100%;
  overflow: auto;
  background-color: rgb(230, 229, 229);
}

.box_cb1 {
  background-color: rgb(255, 255, 255);
  width: 97%;
  margin-left: 16px;
  margin-top: 10px;
}

.box_cb2 {
  height: 900px;
}

.bdd {
  width: 90%;
  height: 20px;
}

.picture {
  width: 140px;
  height: 210px;
  margin-left: -20px;
}

.fenye {
  margin-top: 16px;
  margin-left: 270px;
}

.filmName {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}

.box-card00 {
  width: 320px;
  height: 200px;
  margin-top: 30px;
  margin-left: 30px;
}

.card-left00 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 160px;
  width: 120px;
}

.card-right00 {
  font-size: 12px;
  margin-top: -170px;
  margin-left: 130px;
  height: 186px;
  overflow: hidden;
}
.el-radio-group{

  margin-left: 400px;
  // .el-radio-button{
  //   &.active {
  //     color: #f9f6fa;
  //     background-color: #0f3fce;
  //   }
  // }

      
}
</style>